Firefox Rendering Issues with Japanese Text

[bewizible]

Hey there!

First off, I just want to say a huge thank you to the team for creating such an incredible reader—it's truly a game-changer, and I really appreciate all the hard work that goes into it.

With Kiwi Browser recently being retired, Firefox has become the only solid option for using Yomitan on Android. However, Firefox has a few quirks when it comes to rendering Japanese text. I completely understand that these are Firefox-related issues rather than anything on ttu’s end, but since I mainly use ttu for reading Japanese, I was wondering if anything could be done to improve the experience.

One of these issues has already been reported to Firefox ([5403](mozilla/kitsune#5403)), but unfortunately, it seems like fixing it is a very low priority for them. There’s also another issue where a small tweak on ttu’s side might help, so I wanted to bring it to your attention. Of course, I totally understand if this isn’t feasible, but I’d be really grateful for any guidance or potential fixes.

1. Furigana Spacing Issue

Furigana tends to have an excessive amount of space around it. Here’s a comparison:

Expected Behavior:

Current Behavior in Firefox:

A workaround is to use a different font, or apply a custom CSS fix via Stylus (as mentioned in the linked issue), but I was wondering if there’s anything that could be done directly within ttu to address this.

2. Vertical Text Rendering for "?!"

When reading in vertical text, the combination of ?! doesn’t display correctly.

Expected Behavior:

Current Behavior in Firefox:

As far as I know, this only affects ?!. Would it be possible for ttu to apply a fix to display this correctly?

I completely understand if these are minor issues that may not be a priority, but if there’s any way to improve the experience on ttu’s end (even just for its own site), I’d really appreciate it. Thanks so much for your time and all the amazing work you do!

[Renji-XD]

hi,

to 1)
which font do you use and does it occur on all books? i tried with some default fonts and the referenced Source Han Serif / PingFang TC on desktop and tablet firefox on couple of books but for me the space looks fine (some space on the right side is expected due to a required yomitan scan workaround). If its really coming from the browser rendering it wrong it potentially could be difficult to adjust as ruby/rt elements ignore alot of the styling attributes of normal block elements. It seems firefox (at least on desktop) applies negative margins but based on the used font, font size and other settings it propably could run into many edge cases...

so ya using a different font or just keeping kiwi as jp immersion reader browser would potentially be the simples solution. You could also try out an extension which injects custom css and add a rule like margin-left: -10px and play around with the value and see if that could work for you

to 2)
It is possible to rotate characters coming from a horizontal script back to the original direction. The question though is if your example is really a single glyph ⁉ or two characters - because i checked some examples and for me the single glyph ⁉ is already rendered horizontally (on chrome). Rotating would also look like this in the case:

Also it would be applied to all characters from a horizonal script which would lead to cases like this (and the reason i would put it behind an optional setting):

Just targeting specific characters or rotate on one line if they are multiple characters is not straightforward possible and probably nothing i would like to do on a js level.

Let me know in case you think the first option would be interesting for you - you can also test it out before via css injection extension and following rule if you like: .book-content.book-content--writing-vertical-rl {text-orientation: upright;}

[bewizible]

which font do you use and does it occur on all books?

Some fonts which is doesn't work with would be YuMincho (macOS version), Hiragino Serif Pr6N, Hiragino Maru, MS Mincho, and some fonts it would work perfectly fine with are Ryumin (Go-to physical novel font), Tsukushi Mincho (Tsukihime font). I have a few different series like Re:Zero, The Apothecary Diaries, and Classroom of the Elite and I can say this persists through all of them.

Source Han Serif / PingFang TC on desktop and tablet firefox

I can vouch that Source Han Serif would work fine due to it's line-height nature. If you take a look at the issue I've linked the reason this happens is that some fonts have their line-height significantly higher than glyph height. Some fonts do this, some don't.

There's a pretty good workaround fix for this mentioned by larachung on that issue and that would be

@font-face {
  font-family: "Boston";
  src: local("Boston") format('TrueType');
  unicode-range: U+20;
}

body {
  font-family: "Boston", "Source Han Sans";
}

This CSS will use the line-height/glyph-height information from Boston, and not affect the glyphs of Source Han Sans(except U+20, the space character), of course Boston here could be replace with just about any normal english font. I recommend Inter.

... rendered horizontally (on chrome)

yes well it is rendered fine on chrome. Firefox Android seems to render ? and ! by themselves correctly too but for some reason in cases where ?! should be together and vertical, it doesn't

Here are the characters in question copied as it is from the original epub itself !? seems to me like two different characters. In the html, this is the source code being used whenever this ?! is being used, this is just one volume of Re:zero so other will surely be different but here is it anyways

<span class="tcy"><span xmlns="http://www.w3.org/1999/xhtml" class="koboSpan" id="kobo.53.1">!?</span></span

Funnily enough, ? and ! whenever are being used by themselves are just normally placed in they are inside the usual sentences but ?! has its own span with its own class.

.tcy {
  -webkit-text-combine: horizontal;
  -epub-text-combine:   horizontal;
}

I hope this information helps you

[Renji-XD]

yes well it is rendered fine on chrome. Firefox Android seems to render ? and ! by themselves correctly too but for some reason in cases where ?! should be together and vertical, it doesn't

ya but that was my point. that is not the ⁉ glyph but two separate characters. In your example they are wrapped by an element which can be used as styling target but that is not given for every book and every location. In this case it does not work on firefox because the used styles are not supported there. Adding text-combine-upright: all; to the used css class in the stylesheet via calibre or css injection extension would make it work in ff too - but as said that is book/line specific and nothing i would/could add at a global/generic level.

so let me know if (besides your mentioned workaround) the mentioned option from my previous comment and the respective implications on the overall horizontal script characters for rotating them is of interest to you or not (probably not as it is not doing exactly what you want)

[bewizible]

Hello there, after looking around a lot and asking some friends I came across Edge Canary, another mobile browser that supports extensions like Ublock/Yomitan, and is also recommended on Kiwi's now retired README (I wonder why didn't I see it earlier). Canary renders everything fine and as needed, along with the ?! and the whitespace/line-height problem with certain fonts of course. So I don't think you need to code anything specifically for firefox since something better already exists. Thanks a lot for your time on this issue and my bad for not looking around more before opening one!